import { EMOJI } from '@/components/icon';

// 将文本转成表情
export function textToEmoji(text: string) {
    // 解析表情，正则匹配方括号，尝试找到对应的表情图片路径，若不存在则不渲染
    // 这里的(_,name) 第一个参数是类似于[微笑]这样的key名,name拿的就是[]内的名称
    return text.replace(/\[([^\]]+)\]/g, (_, name) => {
        // 引入了EMOJI数组path值为 EMOJI数组中对应key名的value值就是图像的地址,例如[微笑] 对应/emoji/weixiao.png
        const path = EMOJI[`[${name}]`];
        // 如果path没值 也就是在EMOJI数组中 name的值没有对应的value
        if (!path) return `[${name}]`; //就返回这个被[]包起来的name
        return `<img class="w-[1.2em] h-[1.2em] inline-block mx-1 mt-[-2px]" src="${path}" alt="[${name}]" />`;
    });
}

// 将表情转成对应方括号文本
export function emojiToText(text: string) {
    // text是函数带入的参数,将这个参数用replace方法首先去找全部的<img>标签 ,把这个<img>整体替换成,<img>标签中alt的值
    return text.replace(
        // 第一个参数可以是字符串 也可以是正则表达式,匹配的是所有的<img>标签   其中()是捕获表达式
        /<img class="w-\[1\.2em\] h-\[1\.2em\] inline-block mx-1 mt-\[-2px\]" src="([^"]+)" alt="([^"]+)"(\S+\/)?>/g,
        // 第一个参数_是原子字符串,第二个参数是src中的数据 第三个name是alt中的数据查找是除了"以外的所有字符,第四个是用正则表达式匹配空格一次或多次,后面的?表示可选
        (_, __, name, ___) => {
            return name;
        }
    );
}

// html标签转成换行符
export function htmlToText(text: string) {
    let t = text.replace(
        // 用来分组 但不捕获表达式  | 是用于指定多个模式的选择 []匹配括号内的所有字符'1','-','6'
        /(.*?)<(?:div|p|h[1-6])>(.*?)<\/(?:div|p|h[1-6])>(.*?)/g,
        (_, content) => {
            // 返回值为换行.是匹配任意字符(换行符除外) *是匹配前面的模式一次或多次 ?匹配前面的模式零次或一次
            return `\n${content}`;
        }
    );
    t = text.replace(/(.*?)<span>(.*?)<\/span>(.*?)/g, (_, content) => {
        return `${content}`;
    });
    return t.replace(/<br(\S+\/)?>/g, '\n');
}

// 将卡片消息转成html卡片
export function cardToHtml(text: string) {
    if (text !== '【卡片消息】') return text;

    const template = `
        <div class="card rounded-xl max-[250px] h-[60px] flex flex-row user-select-none border border-gray-100 bg-gray-50  items-center">
            <img class="rounded-tl-xl rounded-bl-xl h-full w-auto" src="/card_logo.png" alt="估" />
            <div class="flex flex-col justify-center ml-2">
                <span class="font-bold text-[14px]">立即估价</span>
                <span class="text-gray-600 text-[12px]">点击估价，机况属实不压价</span>
            </div>
        </div>
    `;

    return template;
}
